<template>
    <div class="account-order">
        <div class="container">
            <div class="row">
                <div id="content" class="col-sm-12">
                    <div class="nav-bar">历史订单</div>
                    <div class="row widget order-type-widget">
                        <div class="col-sm-12">
                            <div class="order-button-group">
                                <div v-bind:class="{'active':filter.status==''}" ><a v-on:click="search_order()">所有订单</a></div>
                                <div v-bind:class="{'active':filter.status=='pending'}" ><a v-on:click="search_order('pending')">待付款</a></div>
                                <div v-bind:class="{'active':filter.status=='processing'}" ><a v-on:click="search_order('processing')">待发货</a></div>
                                <div v-bind:class="{'active':filter.status=='shiped'}" ><a v-on:click="search_order('shiped')">待收货</a></div>
                                <div v-bind:class="{'active':filter.status=='complete'}" ><a  v-on:click="search_order('complete')">已完成</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="row widget" v-for="item in list">
                        <div class="col-xs-12">
                            <div class="order-item-wrapper">
                                <div class="order-info-top">
                                    <div class="info">
                                        <a v-bind:href="'#/account/order/' + item.id">订单号: #{{item.order_no}}</a>
                                        <a class="text-right" v-bind:href="'#/account/order/'+item.id">订单状态: {{item.status_text}}</a>
                                    </div>
                                </div>
                                <div class="products">
                                    <a v-for="g in item.goods">
                                        <div class="product-item">
                                            <div class="image">
                                                <img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png"
                                                     class="img-responsive" >
                                            </div>
                                            <div class="info">
                                                <div class="name">{{g.goods_name}}</div>
                                                <div class="price">￥{{g.goods_total}}</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="order-info-bottom">
                                    <a v-bind:href="'#/account/order/'+item.id">
                                        <div class="total">合计: ￥{{item.total}}</div>
                                        <div class="date">订单日期: {{item.create_time}}</div>
                                    </a>
                                </div>
                                <div class="order-info-action">
                                    <a v-on:click="cancel_order( item )" class="btn btn-info">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div class="order-item-wrapper">
                                <div class="order-info-top">
                                    <div class="info">
                                        <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=757">订单号: #757</a>
                                        <a class="text-right" href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=757">订单状态: 待付款</a>
                                    </div>
                                </div>
                                <div class="products">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=757">
                                        <div class="product-item">
                                            <div class="image"><img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="img-responsive" alt="Beats EP 头戴式耳机有线重低音耳麦通用b耳机"></div>
                                            <div class="info">
                                                <div class="name">Beats EP 头戴式耳机有线重低音耳麦通用b耳机</div>
                                                <div class="price">￥99.00</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="order-info-bottom">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=757">
                                        <div class="total">合计: ￥99.00</div>
                                        <div class="date">订单日期: 2018-11-18 17:39:35</div>
                                    </a>
                                </div>
                                <div class="order-info-action">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/cancel&amp;order_id=757" class="btn btn-info">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div class="order-item-wrapper">
                                <div class="order-info-top">
                                    <div class="info">
                                        <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=675">订单号: #675</a>
                                        <a class="text-right" href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=675">订单状态: 待付款</a>
                                    </div>
                                </div>
                                <div class="products">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=675">
                                        <div class="product-item">
                                            <div class="image"><img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="img-responsive" alt="Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机"></div>
                                            <div class="info">
                                                <div class="name">Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机</div>
                                                <div class="price">￥597.00</div>
                                            </div>
                                        </div>
                                        <div class="product-item">
                                            <div class="image"><img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="img-responsive" alt="Apple/苹果 13 英寸 2.3GHz 处理器 128GB 存储容量 MacBook Pro"></div>
                                            <div class="info">
                                                <div class="name">Apple/苹果 13 英寸 2.3GHz 处理器 128GB 存储容量 MacBook Pro</div>
                                                <div class="price">￥188.00</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="order-info-bottom">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=675">
                                        <div class="total">合计: ￥785.00</div>
                                        <div class="date">订单日期: 2018-10-12 16:54:39</div>
                                    </a>
                                </div>
                                <div class="order-info-action">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/cancel&amp;order_id=675" class="btn btn-info">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div class="order-item-wrapper">
                                <div class="order-info-top">
                                    <div class="info">
                                        <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=658">订单号: #658</a>
                                        <a class="text-right" href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=658">订单状态: 待付款</a>
                                    </div>
                                </div>
                                <div class="products">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=658">
                                        <div class="product-item">
                                            <div class="image"><img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="img-responsive" alt="Beats EP 头戴式耳机有线重低音耳麦通用b耳机"></div>
                                            <div class="info">
                                                <div class="name">Beats EP 头戴式耳机有线重低音耳麦通用b耳机</div>
                                                <div class="price">￥99.00</div>
                                            </div>
                                        </div>
                                        <div class="product-item">
                                            <div class="image"><img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="img-responsive" alt="B&amp;O BeoPlay P2  (多子产品演示)无线蓝牙便携小音箱 丹麦bo迷你户外运动口袋音响"></div>
                                            <div class="info">
                                                <div class="name">B&amp;O BeoPlay P2  (多子产品演示)无线蓝牙便携小音箱 丹麦bo迷你户外运动口袋音响</div>
                                                <div class="price">￥24.00</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="order-info-bottom">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=658">
                                        <div class="total">合计: ￥123.00</div>
                                        <div class="date">订单日期: 2018-09-24 17:04:26</div>
                                    </a>
                                </div>
                                <div class="order-info-action">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/cancel&amp;order_id=658" class="btn btn-info">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div class="order-item-wrapper">
                                <div class="order-info-top">
                                    <div class="info">
                                        <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=657">订单号: #657</a>
                                        <a class="text-right" href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=657">订单状态: 待付款</a>
                                    </div>
                                </div>
                                <div class="products">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=657">
                                        <div class="product-item">
                                            <div class="image"><img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="img-responsive" alt="Beats EP 头戴式耳机有线重低音耳麦通用b耳机"></div>
                                            <div class="info">
                                                <div class="name">Beats EP 头戴式耳机有线重低音耳麦通用b耳机</div>
                                                <div class="price">￥198.00</div>
                                            </div>
                                        </div>
                                        <div class="product-item">
                                            <div class="image"><img src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="img-responsive" alt="Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机"></div>
                                            <div class="info">
                                                <div class="name">Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机</div>
                                                <div class="price">￥199.00</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="order-info-bottom">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/info&amp;order_id=657">
                                        <div class="total">合计: ￥397.00</div>
                                        <div class="date">订单日期: 2018-09-23 21:15:47</div>
                                    </a>
                                </div>
                                <div class="order-info-action">
                                    <a href="https://mall.opencart.cn/index.php?route=account/order/cancel&amp;order_id=657" class="btn btn-info">取消</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    -->
                    <div class="col-sm-12 text-center"></div>
                </div>
            </div>
        </div>
        <bottom-nav></bottom-nav>
    </div>
</template>

<script>
    import nav from '../components/common/nav';
    export default {
        name: "account_order",

        data:function(){

            return {

                filter:{
                    status : ''
                },
                list:[],
                total:0,
            }

        },

        methods:{

            search_order:function( order_status ){

                this.filter.status = order_status ? order_status : '';
                this.get_list();
            },

            get_list:function(){

                var t = this;
                var url = this.config.web_url + '?r=checkout/order/get_list';

                if( this.filter.status ){
                    url += '&status=' + this.filter.status;
                }

                this.axios.get( url ).then(function( res ){

                    t.list = res.data.list;
                    t.total = res.data.total;
                });

            },

            //取消订单
            cancel_order:function( order ){

                var t = this;
                var url = this.config.web_url + '?r=checkout/order/cancel';
                var data = 'order_id=' + order.id;
                this.axios.post( url, data ).then(function( res ){

                    if( res.data.status == 0 ){
                        t.get_list();
                    }

                });

            }

        },

        created:function(){

            if( this.$route.params.status ){
                this.filter.status = this.$route.params.status;
            }
            this.get_list();


        },

        components:{
            'bottom-nav':nav
        }
    }
</script>

<style scoped>

</style>